<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>layui数据表格</title>
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
		<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- 方法渲染 -->
		<!-- 准备容器标签设置id属性值 -->
		<form class="layui-form" action="">
				<div class="layui-inline">
					<label class="layui-form-label">年级</label>
					<div class="layui-input-inline">
						<input type="text" id="grade" name="grade" placeholder="请选择年级"
							autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">专业</label>
					<div class="layui-input-inline">
						<select name="majorid" id="majorid">
							<option value="">请选择</option>
						</select>
					</div>
				</div>
				<div class="layui-inline">
					<div class="layui-input-inline">
						<button class="layui-btn" id="searchBtn" lay-submit
							lay-filter="formDemo" data-type="reload" style="margin-left: 15px">
							<i class="layui-icon layui-icon-search"></i> 查询
						</button>
						<button type="reset" class="layui-btn layui-btn-primary">重置</button>
					</div>
				</div>
			</form>
		<table id="demo"></table>
		<hr>
		<!-- 自动渲染
				1、带有class="layui-table" 的table标签
				2、对标签设置属性lay-data=""用于配置一些基础参数
				3、在th标签中设置属性lay-data=""用于配置表头信息
		 -->
		 <table id="test" class="layui-table" lay-data="{url:'js/user_data.json',height:315,page:true,limit:10,limits:[5,10,20,30,50],layout:['prev', 'page', 'next','limit','count']}" lay-filter="test">
			 <thead>
				 <tr>
					 <th lay-data="{field:'id',width:100}">ID</th>
					 <th lay-data="{field:'username',width:100}">用户名</th>
					 <th lay-data="{field:'sex',width:100}">性别</th>
				 </tr>
			 </thead>
		 </table>
		 
		 <!-- 转换静态 -->
		<table lay-filter="demo03">
		  <thead>
		    <tr>
		      <th lay-data="{field:'username', width:100}">昵称</th>
		      <th lay-data="{field:'experience', width:80, sort:true}">积分</th>
		      <th lay-data="{field:'sign'}">签名</th>
		    </tr> 
		  </thead>
		  <tbody>
		    <tr>
		      <td>贤心1</td>
		      <td>66</td>
		      <td>人生就像是一场修行a</td>
		    </tr>
		    <tr>
		      <td>贤心2</td>
		      <td>88</td>
		      <td>人生就像是一场修行b</td>
		    </tr>
		    <tr>
		      <td>贤心3</td>
		      <td>33</td>
		      <td>人生就像是一场修行c</td>
		    </tr>
		  </tbody>
		</table>
		
		<script type="text/javascript">
			layui.use("table",function(){
				var table=layui.table;
				
				//方法执行渲染
				table.render({
					elem:"#demo" //绑定容器的id
					,url:"js/user_data.json"//数据接口
					,height:315//设置容器高度
					,page:true //开启分页
					,cols:[[
					 {field:'id',title:'用户编号',sort:true,width:120}
					,{field:'username',title:'姓名',width:100}
					,{field:'sex',title:'性别'}
					,{field:'city',title:'城市'}
					,{field:'classify',title:'职业'}
					]]
				});
				//转换静态表格
				table.init('demo03', {
				  height: 315 //设置高度
				  ,page:true //开启分页
				  ,limit: 10 //注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致
				  //支持所有基础参数
				}); 

			});
			
			//年级用日历显示
			var laydate = layui.laydate;
				laydate.render({
					elem : '#grade', //指定元素
					type : 'year'
				});
			
				//获取下拉框专业
				$.ajax({
					url : '../../MajorFindAllServlet?deptid=5',
					dataType : 'json',
					data : {
						'state' : 0
					}, //查询状态为正常的所有机构类型
					type : 'post',
					success : function(data) {
						$.each(data, function(index, item) {
							$('#majorid').append(
									new Option(item.majorname, item.majorid));// 下拉菜单里添加元素
						});
						layui.form.render("select");
					}
				});
			
			var table = layui.table;
				table.render({
					elem : '#table',
					url : '../../ClassesFindByPageServlet',
					toolbar : '#toolbarDemo',
					title : '班级表',//导出文件名
					page : {
						layout:['count','prev','page','next', 'skip']
					},//开启分页
					id : 'tableAll',
					where : {
						majorid : '',
						grade : ''
					},
					request : {
						'limitName' : 'pageSize' //分页每页条数默认字段改为pageSize
					},
					cellMinWidth : 80, //全局定义常规单元格的最小宽度，layui 2.2.1 新增
					cols : [ [ {
						type : 'checkbox',
						fixed : 'left'
					}, {
						field : 'classid',
						title : '班级编号'
					}, {
						field : 'classname',
						title : '班级名称'
					}, {
						field : 'deptname',
						title : '院系名称'
					}, {
						field : 'majorname',
						title : '专业名称'
					}, {
						field : 'grade',
						title : '年级',
						sort : true
					}, {
						fixed : 'right',
						title : '操作',
						toolbar : '#barDemo'
					} ] ]
				});
			
			//点击查询按钮，重载表格
				$('#searchBtn').on('click', function() {
					table.reload('tableAll', {
						method : 'post',
						where : {
							grade : $('#grade').val(),
							majorid : $('#majorid').val()
						},
						page : {
							curr : 1
						}
					});
					return false;
				});
		</script>
	</body>
</html>
